<!-- 会计科目->应付款余额表 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="searchDynamic">
                                <a-icon class="btns-icon" type="search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns">
                                <a-icon class="btns-icon" type="unordered-list" />
                                <div class="btns-text">总账</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="export" />
                                <div class="btns-text">导出</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="printer" />
                                <div class="btns-text">打印</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div ref="print" class="credentials-wrapper" id="documents-wrapper">
                <h3 class="text-center">
                    <span class="text-name">应付款余额表</span><br>
                </h3>
                <div class="date-tp">
                    <div class="bills-box-header">
                        <div class="filter">
                            <div class="filter-label"><span style="color:red">* </span>科目名称:</div>
                            <div class="filter-control">
                                <a-input @click="searchGroup(1)" @change="searchGroup(2)" v-model="name" autocomplete="off" placeholder="请选择科目名称">

                                </a-input>
                                <searchGroupHeader ref="credentialsSearch" :inputValue="name" :componentName="'accountingRadio'" @clickItem="setValue"></searchGroupHeader>
                            </div>
                        </div>
                        <div class="filter">
                            <div class="filter-label"><span style="color:red">* </span>月份:</div>
                            <div class="filter-control">
                                <a-month-picker style="width:45%" placeholder="开始月份" v-model="beginDate"></a-month-picker>至
                                <a-month-picker style="width:45%" placeholder="结束月份" v-model="endDate"></a-month-picker>
                            </div>
                        </div>
                    </div>
                </div>
                <section v-show="showModel=='order'">
                    <div><span class="audit-status" v-show="voucherState==0">待审核</span><span class="audit-status" v-show="voucherState==1">已审</span></div>
                    <a-row>
                        <a-col :span="24">
                            <div class="table-box">
                                <a-table id="bills_tb" :columns="columns" :customRow="customClick" :data-source="dataSource" :pagination="false" :size="small" bordered>
                                    <template slot="debitAmount" slot-scope="text">
                                        <div>{{text | NumFormat}}</div>
                                    </template>
                                    <template slot="balance" slot-scope="text">
                                        <div>{{text | NumFormat}}</div>
                                    </template>
                                </a-table>
                            </div>
                        </a-col>
                    </a-row>
                    <div class="edit-mask" v-show="editMask">
                        <!-- 遮罩（点击修改关闭遮罩） -->
                    </div>
                </section>

            </div>
            <div class="contextmenu-box">
                <!-- 右键菜单 -->
                <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
                    <!-- <li @click="handleAdd()">新增行</li>
                    <li @click="handleDelete()">删除行</li>
                    <li @click="handleCopy()">复制行</li> -->
                    <li>新增行</li>
                    <li>删除行</li>
                    <li>复制行</li>
                </ul>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <div v-html="stylePrint"></div>

        <!--查询弹窗-->
        <search-wrapper ref="searchWrapperRef" :componentType="componentType" @newPlan="getMyselfPlan" @changePlane="changePlane" :reportCode="reportCode" :businessType="businessType">
        </search-wrapper>
    </div>
</template>
<script>

const dataSource = [];
for (let i = 0; i < 10; i++) {
    let array = {
        date: new Date().getFullYear() + '年' + Number(new Date().getMonth() + 1) + '月',
        abstract: parseInt(Math.random() * 10000),
        name: `${i}100`,
        debitAmount: parseInt(Math.random() * 10000),
        remark: i % 2 == 0 ? '期初余额' : i % 3 == 0 ? '本期发生额' : '本月合计',
        beginAmountDirection: i % 2 == 0 ? '借' : '贷',
        balance: parseInt(Math.random() * 1000),
    }
    dataSource.push(array);
}
import searchWrapper from '@/components/Finance/searchWrapper';
import moment from "moment";
import searchGroupHeader from "@/components/Finance/searchGroupHeader";
export default {
    components: {
        searchWrapper,
        searchGroupHeader
    },
    data () {
        return {
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------

            customClick: (record, index) => ({
                on: {
                    contextmenu: (e) => {//右键事件
                        e.preventDefault();
                        if (record.number != "合计") {
                            this.openMenu(e);
                            console.log('右键点击的', index);
                            this.thisClickId = index;
                            this.thisClickRecord = record;
                        }
                    },
                    click: () => {
                        // console.log(record);
                    }
                },
            }),

            showModel: 'order',//list:列表，order:单据
            columns: [{
                title: '会计期间',
                key: 'date',
                dataIndex: 'date',
                width: 100,
                align: 'center'
            }, {
                title: '记账凭证号',
                dataIndex: 'abstract',
                width: 80,
                align: 'center',
            },
            {
                title: '摘要',
                dataIndex: 'remark',
                width: 200,
            }, {
                title: '借方金额',
                dataIndex: 'debitAmount',
                width: 200,
                scopedSlots: {
                    customRender: 'debitAmount'
                },
                align: 'right',
            }, {
                title: '贷方金额',
                dataIndex: 'debitAmount',
                width: 200,
                align: 'right',
                scopedSlots: {
                    customRender: 'debitAmount'
                },
            }, {
                title: '借贷方向',
                dataIndex: 'beginAmountDirection',
                width: 80,
                align: 'center',
            }, {
                title: '余额',
                dataIndex: 'balance',
                width: 200,
                align: 'right',
                scopedSlots: {
                    customRender: 'balance'
                }
            }],
            name: null,
            dataSource: dataSource,
            beginDate: new Date().getFullYear() + '-' + '1',
            endDate: moment().format('YYYY-MM-DD'),
            setTime: null,  //延迟请求
        };
    },
    created () {

    },
    methods: {
        moment,
        printOrder () {
            //打印
            this.$print(this.$refs.print);
        },
        //动态查询搜索条件
        searchDynamic () {
            this.$refs.searchWrapperRef.showModel();
        },
        searchGroup (t) {
            if (t == 1) {
                this.$refs.credentialsSearch.showModal();
            } else {
                //延迟请求
                if (this.setTime) {
                    clearTimeout(this.setTime)
                }
                this.setTime = setTimeout(() => {
                    this.$refs.credentialsSearch.inputSearch();
                }, 500)
            }
        },
        setValue (data) {
            this.name = data.name;
        },
        onChangeBusinessDate (e, v) {
            this.dateTime = v;
        }
    }
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';

    .credentials-wrapper {
        padding: 10px;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        .date-tp {
            margin-bottom: 10px;
            .header-tp {
                text-align: left;
            }
        }
        .footer-tp {
            text-align: center;
            margin-top: 10px;
        }

        .text-name {
            // border-bottom: 2px solid rgba(0, 0, 0, 0.8);
            padding-bottom: 5px;
        }

        .bills-box-header {
            display: flex;
            justify-content: space-around;
            .filter {
                display: table;
                width: 280px;
                margin-bottom: 5px;
                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    line-height: 32px;
                    white-space: nowrap;
                    vertical-align: bottom;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .filter-control {
                    display: table-cell;
                    width: 100%;
                }
            }
        }
    }
</style>